<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>京东读书内容采集器</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <h1>京东读书内容采集器</h1>
    
    <div class="status-container">
      <div class="status-label">状态:</div>
      <div id="status" class="status-value">未开始</div>
    </div>
    
    <div class="book-info">
      <div class="book-id-container">
        <label for="bookId">书籍ID:</label>
        <input type="text" id="bookId" placeholder="例如: 30888283">
        <button id="detectBtn" class="btn detect" title="从当前页面URL识别">识别</button>
      </div>
      <div class="book-title-container">
        <div class="title-label">书名:</div>
        <div id="bookTitle" class="title-value">未检测</div>
      </div>
    </div>
    
    <div class="settings">
      <div class="interval-container">
        <label for="interval">采集间隔(秒):</label>
        <input type="number" id="interval" min="5" value="5">
      </div>
      <div class="output-container">
        <div class="output-label">输出目录:</div>
        <div id="outputPath" class="output-value">下载目录/京东读书/</div>
      </div>
    </div>
    
    <div class="progress-container">
      <div class="progress-label">进度:</div>
      <div class="progress-bar-container">
        <div id="progressBar" class="progress-bar"></div>
      </div>
      <div id="progressText" class="progress-text">0%</div>
    </div>
    
    <div class="log-container">
      <div class="log-label">日志:</div>
      <div id="log" class="log-content"></div>
    </div>
    
    <div class="file-path-container">
      <div class="file-path-label">文件保存位置:</div>
      <div id="filePath" class="file-path-value">等待保存...</div>
    </div>
    
    <div class="buttons">
      <button id="startBtn" class="btn start">开始采集</button>
      <button id="stopBtn" class="btn stop" disabled>停止</button>
    </div>
  </div>
  
  <script src="popup.js"></script>
</body>
</html> 